<!DOCTYPE html>
< lang="en">

{extend name="/index/header"}



{block name="mycss"}
{css  href="__CSS__bootstrap.min.css"}
{css  href="__INDEX__reset.css"}
{css href="__CSS__toastr.min.css"}
{/block}

{block name="main"}
    <!-- 内容区域 -->
    <div class="tpl-content-wrapper">

        <div class="container-fluid am-cf">
            <div class="row">
                <div class="am-u-sm-12 am-u-md-12 am-u-lg-9">
                    <div class="page-header-heading"><span class="am-icon-home page-header-heading-icon"></span> 表单 <small>Amaze UI</small></div>
                    <p class="page-header-description">Amaze UI 有许多不同的表格可用。</p>
                </div>
                <div class="am-u-lg-3 tpl-index-settings-button">
                    <button type="button" class="page-header-button"><span class="am-icon-paint-brush"></span> 设置</button>
                </div>
            </div>

        </div>

        <div class="row-content am-cf">


            <div class="row">

                <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
                    <div class="widget am-cf">
                        <div class="widget-head am-cf">
                            <div class="widget-title am-fl">添加用户</div>
                            <div class="widget-function am-fr">
                                <a href="javascript:;" class="am-icon-cog"></a>
                            </div>
                        </div>
                        <div class="widget-body am-fr">

                            <form action="/doaddpre"  method="post" class="mt20 h3">
                                <b id="fp">分类权限:</b>

                                <select name="rid" id="sele"  style="background:black">
                                    {volist  name="list" key="k" id="v" }
                                    <option class="op" value="{$v['id']}">{$v['role_name']}</option>
                                    {/volist}
                                </select>
                            </form>



                            <div id="box">

                            </div>


                        </div>
                    </div>
                </div>
            </div>


        </div>
    </div>

{block name="myjs"}
<script>
    $(function() {

        var rid =$('#sele').val();
        showRoles(rid);

        $('#sele').change(function(){
            var rid =$('#sele').val()//每次选择都会输出选择的当前option的value
            console.log(rid);
            showRoles(rid);
        })

    })

    function showRoles(rid){
        $.ajax({
            method : 'get', // 请求方式
            url : '/showRoles/' + rid, // 路由+ id
            dataType : 'json',
            success : function (data){
                console.log(data);
                if (data) {
                    for (var i = 0; i < data.length; i++) {
                        // console.log(data[i].pre_name);
                        var html ='<input type="checkbox">'+data[i].pre_name;
                        $("#box").html('');
                        $("#box").append(html);

                        // $("div").append('<div class="box"></div>');
                        // $('<li>').html(data[i].pre_name).appendTo('.box');
                    }

                } else {
                    // 填充信息
                    alert('错误')
                }
            },
            error : function() {
                alert('AJAX 执行失败');
            }
        });
    }
</script>

{/block}
{/block}
</div>
</div>
<script src="assets/js/amazeui.min.js"></script>
<script src="assets/js/amazeui.datatables.min.js"></script>
<script src="assets/js/dataTables.responsive.min.js"></script>
<script src="assets/js/app.js"></script>




</body>

</html>